<template>
  <view class="router-view container bcl-active">
    <!-- 顶部栏 -->
    <view class="uni-header box box-center bcl-white">
      <view class="search-box box-1">
        <uni-search-box
          v-model="keyword"
          :hasBorder="true"
          :autoFocus="true"
          @search="search"
        ></uni-search-box>
      </view>
      <view class="search-btn pointer" @tap="search">搜索</view>
    </view>

    <!-- 搜索选项 -->
    <view class="search-options" v-if="keyword.length == 0">
      <!-- 搜索历史 -->
      <view class="mt-20" v-if="historys.length">
        <!-- 标题 -->
        <view class="title box box-between">
          <text class="bold">搜索历史</text>
          <text class="cl-second pointer pointer-filter" @tap="clearHistory"
            >全部清除</text
          >
        </view>

        <!-- 列表 -->
        <view class="uni-label-list mt-20">
          <view
            class="uni-label pointer pointer-filter bcl-white"
            v-for="(item, index) in historys"
            :key="index"
            @tap="search(item)"
          >
            <text class="hide-text-2 pl-5 pr-5">{{ item }}</text>
          </view>
        </view>
      </view>

      <!-- 热门搜索 -->
      <view class="mt-20" v-if="hots.length">
        <!-- 标题 -->
        <view class="title box box-between">
          <text class="bold">热门搜索</text>
        </view>

        <!-- 列表 -->
        <view class="uni-label-list mt-20">
          <view
            class="uni-label pointer pointer-filter bcl-white"
            v-for="(item, index) in hots"
            :key="index"
            @tap="search(item.name)"
          >
            <text class="hide-text-2">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniSearchBox from "@/components/searchBox";
import { listHotCate } from "@/apis/app";

export default {
  data() {
    return {
      keyword: "",
      results: [],
      historys: uni.getStorageSync("searchHistorys") || [],
      hots: [],
    };
  },

  onLoad() {
    this.listHotCate();
  },

  onShow() {
    uni.setStorageSync("lastPage", this.__route__ || this.route); // 记录最近一次访问的页面
  },

  methods: {
    /**
     * 获取热门搜索
     */
    async listHotCate() {
      let { code, data } = await listHotCate();
      if (code == 200) this.hots = data;
    },

    // 搜索
    search(keyword) {
      if (typeof keyword == "string") this.keyword = keyword;

      this.saveHistory(this.keyword);
      uni.hideKeyboard();

      // 跳转到任务大厅
      uni.switchTab({
        url: `/task/task?keyword=${this.keyword}`,
        success: (res) => {
          uni.setStorageSync("currentKeyWord", this.keyword);
          setTimeout(() => {
            uni.$emit("search");
          }, 500);
        },
      });
    },

    // 清除搜索历史
    clearHistory() {
      uni.clearStorageSync("searchHistorys");
      this.historys = [];
    },

    // 保存搜索历史
    saveHistory(keyword) {
      if (this.historys.includes(keyword) || !keyword) return false;

      this.historys.push(keyword);
      uni.setStorageSync("searchHistorys", this.historys);
    },
  },

  components: {
    uniSearchBox,
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  padding-top: 120upx;

  // 顶部栏
  .uni-header {
    padding: 10px 0 10px 10px;

    .search-btn {
      width: 100upx;
      height: 70upx;
      line-height: 70upx;
      text-align: center;
    }
  }
}
</style>
